<template>
    <div id="container">
    </div>
</template>

<script setup lang="ts" name="GaoDeMap">
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted,onUnmounted } from 'vue';
let map = null

onMounted(()=>{
    window._AMapSecurityConfig = {
        securityJsCode:"9ab6b2a65278a8ff5212f8ccc56dd26c"
    }
    AMapLoader.load({
        key: "fd2b116b9d9f5e04d62e7d92a45f187a",
        version: "2.0",
        plugins: ["AMap.Scale"],
    }).then((AMap)=>{
        map = new AMap.Map("container",{
            zoom:12,
            center:[117.227512,31.779695]
        })

        const marker = new AMap.Marker({
            map:map,
            position:[117.227512,31.779695],
            icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
        })
        
        // map.setFitView(
        //     [marker],  // 覆盖物数组
        //     false,  // 动画过渡到制定位置
        //     [60, 60, 60, 60],  // 周围边距，上、下、左、右
        //     10,  // 最大 zoom 级别
        // );

    }).catch((e)=>{
        console.log(e)
    })
})

onUnmounted(()=>{
    map?.destroy()
})

</script>

<style scoped>
    #container{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 500px;
    }
</style>